<template>
  <div class="page">
    <Indicator
      :move="move"
      @rotate="rotate"
      @zoom="zoom"
      @reset="reset"
      @drawStart="drawStart"
      @moveStart="moveStart"
      @addHighlightArea="addHighlightArea"
      @toggleGuidelines="toggleGuidelines"
    />
    <imagePreview class="prev-img" ref="preveImg" :move="move" :imageSrc="imageSrc">
      <template v-slot:topLayer="{ width, height }">
        <gridAxis
          v-if="guidelines.show"
          :width="width"
          :height="height"
          :grid="guidelines.grid"
          :showText="guidelines.showText"
          :color="guidelines.color"
          :dash="guidelines.dash"
          :strokeWidth="guidelines.strokeWidth"
          :key="width + height"
        />
      </template>
    </imagePreview>
  </div>
</template>
<script>
import Indicator from "./packages/indicator.vue";
import gridAxis from "./packages/gridAxis.vue";
import ImagePreview from "./packages/imagePreview.vue";
export default {
  name: "App",
  components: {
    Indicator,
    ImagePreview,
    gridAxis,
  },
  data() {
    return {
      guidelines: {
        show: true,
        grid: 100,
        color: "gray",
        showText: true,
        dash: [5, 5],
        strokeWidth: 1,
      },
      move: true,
      imageSrc:
        "https://oss.xinjiaoyu.com/exam/test/182769/10237/20230413_64aacbb1995a4d91b8a1ef8342518af5_36/20230413_64aacbb1995a4d91b8a1ef8342518af5_36_001_page.jpg",
    };
  },
  methods: {
    rotate(angle) {
      this.$refs.preveImg.rotate(angle);
    },
    zoom(scale) {
      this.$refs.preveImg.zoom(scale);
    },
    reset() {
      this.$refs.preveImg.reset();
    },
    drawStart() {
      this.move = false;
    },
    moveStart() {
      this.move = true;
    },
    toggleGuidelines() {
      this.guidelines.show = !this.guidelines.show;
    },
    addHighlightArea(area) {
      this.$refs.preveImg.addHighlightArea(area);
      this.drawStart();
    },
  },
};
</script>
<style lang="scss">
.page {
  display: flex;
  flex-direction: column;
  width: 90vw;
  height: 90vh;
  margin: 0 auto;
  .prev-img {
    flex: 1;
  }
}
</style>
